import Taro, {Component, Config} from '@tarojs/taro'
import { Button, Image, Text, View } from '@tarojs/components'
import classNames from 'classnames'
import './index.scss'
import { getScoreConfig, getSignScore, addSignScore, getScorePage } from '@/api/userApi'
import { PrefixZero } from "@/utils/utils"
import { INTEGRAL_TYPE } from '@/config/types'
import { getUserInfoStorage, getBrand } from '@/utils/storage'
import { toHomePage, toIntegralRecordPage } from '@/utils/page_router'
import { Loading } from '@/components/index'
import { IntegralRecordList } from '@/market/components'
import headImg from "@/assets/icon/user-avatar.png";

export default class Index extends Component {
  state: any
  config: Config = {
    backgroundTextStyle: "dark",
    navigationBarTitleText: `${getBrand()}签到`,
    navigationBarTextStyle: process.env.navigationBarTextStyle,
    navigationBarBackgroundColor: process.env.backgroundColor
  }

  constructor() {
    super(...arguments)
    this.state = {
      loading: true,
      dayList: [],
      userInfo: getUserInfoStorage(),
      signDays: [ 0, 0, 0, 0 ],
      scoreInfo: {},
      scoreList: [],
    }
  }

  componentWillMount() {
    this.getScoreConfig()
    this.getScoreInfo()
  }

  async getScoreInfo() {
    const info = await getSignScore().then(res => res.data)
    const list = await getScorePage({ page: 1, limit: 3, type: INTEGRAL_TYPE.SIGN }).then(res => res.data && res.data.list)
    this.setState({
      signDays: PrefixZero(info.signDays || 0, 4).split(''),
      scoreList: list,
      scoreInfo: info || {}
    }, () => {
      this.setState({
        loading: false
      })
    })
  }

  //  获取积分配置
  getScoreConfig() {
    getScoreConfig().then(res => {
      this.setState({
        dayList: res.data,
      })
    })
  }

  //  积分签到
  signScore() {
    Taro.showLoading({ mask: true, title: '加载中...' })
    addSignScore().then(() => {
      Taro.hideLoading()
      Taro.showToast({ title: '签到成功' })
      this.getScoreInfo()
    })
  }

  render() {
    const { loading, dayList, userInfo, signDays, scoreList, scoreInfo } = this.state
    return (<View className='checkin-page'>
      {loading && <Loading/>}
      <View className='checkin-scroll'>
        <View className='checkin-head d-f a-i-c'>
          <View className='user-info f-g-4'>
            <Image src={userInfo.headImg || headImg} className='user-avatar'/>
            <View className='other-info'>
              <View className='user-name l-h-1'>{userInfo.nickName}</View>
              <View className='user-integral f-g-5 l-h-1'>{getBrand()}：{scoreInfo.totalScore}</View>
            </View>
          </View>
          <View className='integral-detail f-g-5' onClick={() => toIntegralRecordPage()}>
            <Text className='detail-icon bnn-icon'>&#xe700;</Text>明细
          </View>
        </View>
        <View className='checkin-body'>
          <View className='checkin-day d-f f-d-c'>
            <View className='day-list d-f f-w-w'>
              {dayList.map((d, k) => {
                return (<View key={k} className={classNames('day-item d-f f-d-c a-i-c', (k+1) <= scoreInfo.currencyDay && 'active')}>
                  <View className='day-title'>{d.name}</View>
                  {/*<View className='day-icon bnn-icon'>&#xe672;</View>*/}
                  <View className='day-icon bnn-icon'>&#xe7f0;</View>
                  <View className='day-num bnn-number'>+{d.number}</View>
                </View>)
              })}
            </View>
            {
              scoreInfo.isSign ? (
                <Button className='checkin-btn f-g-5' onClick={() => toHomePage()}>返回首页</Button>
              ) : (
                <Button className='checkin-btn f-g-5' onClick={this.signScore.bind(this)}>立即签到</Button>
              )
            }

            {/*<Button className='checkin-btn f-g-5' disabled={scoreInfo.isSign} onClick={this.signScore.bind(this)}>立即签到</Button>*/}
          </View>
          <View className='split-box d-f j-c-b'>
            <View className='cut-off-rule'>
              <View className='line'>
                <View className='dot dot-top'/>
                <View className='dot dot-bottom'/>
              </View>
            </View>
            <View className='cut-off-rule'>
              <View className='line'>
                <View className='dot dot-top'/>
                <View className='dot dot-bottom'/>
              </View>
            </View>
            <View className='cut-off-rule'>
              <View className='line'>
                <View className='dot dot-top'/>
                <View className='dot dot-bottom'/>
              </View>
            </View>
          </View>
          <View className='checkin-record'>
            <View className='checkin-title f-g-5'>已累计签到</View>
            <View className='time-box f-g-8'>
              <View className='time-list d-f bnn-number'>
                {signDays.map(i => {
                  return (<View key={i} className='time-item f-g-5'>{i}</View>)
                })}
              </View>
              <View className='time-title'>天</View>
            </View>
            <View className='checkin-explain thin-border__b'>{getBrand()}可叠加。一定要坚持签到哦~</View>
            <IntegralRecordList list={scoreList}/>
            <View className='list-more f-g-5' onClick={() => toIntegralRecordPage({ title: '签到记录', type: INTEGRAL_TYPE.SIGN })}>
              <View className='more-title'>点击查看更多</View>
              <View className='bnn-icon more-icon'>&#xe866;</View>
            </View>
          </View>
        </View>
      </View>
    </View>)
  }
}
